'use strict';
import React, { createClass } from 'react'
import {connect} from 'react-redux'
import { optionSelected } from '../actions'

const QuestionCard = createClass({
    getInitialState() {
        return {
            selectState: []
        }
    },
    render() {
        const { index, data, elmStyle, optionReducer } = this.props;
        let optList = data.options;
        let seledIdx = (optionReducer && optionReducer.data[index]) ? optionReducer.data[index]['selectedItem'] : false;
        return (
            <li className="list-item question" style={elmStyle}>
                <h3 className="heading">{data.question}</h3>
                <div className="handle-board">
                    <div className="option-list">
                        {
                            optList.map((item, idx) => {
                                let selectState = this.state.selectState,
                                    clsName = 'option-item',
                                    selIcoClsName = 'glyphicon glyphicon-unchecked';

                                if (selectState[idx] || (seledIdx === idx)) {
                                    clsName += ' selected';
                                    selIcoClsName = 'glyphicon glyphicon-check';
                                }
                                return (
                                    <div className={clsName}
                                         onClick={this.selectOption.bind(this, index, idx, 'radio', item.score || 0)}
                                         key={idx}>
                                        <div className="select-icon">
                                            <i className={selIcoClsName}></i>
                                        </div>
                                        <div className="option-content">
                                            {item.value}
                                        </div>
                                    </div>
                                );
                            })
                        }
                    </div>
                </div>
            </li>
        )
    },
    selectOption(key, idx, type, score) {
        const { optionReducer, dispatch, next } = this.props;
        dispatch(optionSelected(optionReducer.data, key, idx, type, score));
        let selectState = this.state.selectState,
            len = selectState.length > (idx + 1) ? selectState.length : idx + 1,
            i;
        for (i = 0; i < len; i++) {
            if (!selectState[i]) {
                selectState[i] = null;
            }
            if (type == 'radio') {
                selectState[i] = idx == i;
            }
        }
        this.setState({selectState: selectState});
        setTimeout(function() {
            next(key);
        }, 300);
    }
});

const mapStateToProps = (state) => {
    const { optionReducer } = state;
    return {
        optionReducer
    }
};
export default connect(mapStateToProps)(QuestionCard);